<template>
  <el-form ref="form" label-width="100px">
    <!-- 第一行 -->
    <el-row type="flex" justify="space-between" align="middle" style="height: 80px;width: 100%">
      <el-col :span="6">
        <el-form-item label="学科">
          <el-select v-model="formData.subjectID" placeholder="请选择" @change="changeList(formData.subjectID)">
            <el-option
              v-for="item in list"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="二级目录">
          <el-select v-model="formData.direct" placeholder="请选择" @change="changeDirect(formData.direct)">
            <el-option
              v-for="item in directory"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="标签">
          <el-select v-model="formData.tag" placeholder="请选择">
            <el-option
              v-for="item in directList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="关键字">
          <el-input v-model="formData.keyword" placeholder="根据题干搜素" style="width:220px" />
        </el-form-item>
      </el-col>

    </el-row>

    <!-- 第二行 -->

    <el-row>
      <el-col :span="6">
        <el-form-item label="试题类型">
          <el-select v-model="formData.bank" placeholder="请选择">
            <el-option
              v-for="(item, index) in bankList"
              :key="index"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="难度">
          <el-select v-model="formData.difficulty" placeholder="请选择">
            <el-option
              v-for="(item, index) in difficultyList"
              :key="index"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="方向">
          <el-select v-model="formData.orientation" placeholder="请选择">
            <el-option
              v-for="(item, index) in enteringList"
              :key="index"
              :value="index"
              :label="item"
            />
          </el-select>
        </el-form-item></el-col>
      <el-col :span="6">
        <el-form-item label="录入人">
          <el-select v-model="formData.entering" placeholder="请选择">
            <el-option
              v-for="item in userList"
              :key="item.id"
              :value="item.id"
              :label="item.username"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第三行 -->

    <el-row>
      <el-col :span="6">
        <el-form-item label="题目备注">
          <el-input v-model="formData.remark" style="width:221px" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="企业简介">
          <el-input v-model="formData.enterprise" style="width:221px" />
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-row>
          <el-form-item label="城市">
            <el-col :span="12">
              <el-select v-model="citys.city" placeholder="请选择" @change="handleCity">
                <el-option
                  v-for="(item, index) in provincesList"
                  :key="index"
                  :value="item"
                  :label="item"
                />
              </el-select>
            </el-col>

            <el-col :span="12">
              <el-select v-model="citys.urbanization" placeholder="请选择">
                <el-option
                  v-for="(item, index) in cityList"
                  :key="index"
                  :value="index"
                  :label="item"
                />
              </el-select>
            </el-col>
          </el-form-item>
        </el-row>

      </el-col>
      <!-- 按钮 -->
      <el-col :span="6">
        <el-form-item style="float:right">
          <template>
            <el-button size="small" @click="handleForm">清除</el-button>
            <el-button size="small" type="primary" @click="clickSearch">搜索</el-button>
          </template>
        </el-form-item></el-col>
    </el-row>

  </el-form>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { simple as simples } from '@/api/hmmm/directorys.js'
import { simple as simpledirect } from '@/api/hmmm/tags.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { list } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  data () {
    return {
      formData: {
        subjectID: '', // 学科
        direct: '', // 目录
        tag: '', // 标签
        keyword: '', // 关键字
        bank: '', // 试题类型
        difficulty: '', // 难度
        orientation: '', // 方向
        entering: '', // 录入人
        remark: '', // 备注
        enterprise: '' // 企业
      },
      citys: {
        city: '', // 城市一
        urbanization: ''// 城市二
      },
      list: [], // 学科列表
      directory: [], // 目录列表
      directList: [], // 标签列表
      bankList: [], // 试题列表
      difficultyList: [], // 难度列表
      enteringList: [], // 方向列表
      userList: [], // 用户列表
      provincesList: [], // 省份列表
      cityList: [] // 城市下的区域
    }
  },
  created () {
    this.GetSimpleList()
    this.bankList = questionType// 试题列表
    this.difficultyList = difficulty// 难度列表
    this.enteringList = direction// 方向列表
    this.getUserList()// 用户列表
    this.provincesList = provinces() // 城市
  },
  methods: {
    // 获取学科简单列表
    async  GetSimpleList () {
      const res = await simple()
      // console.log(res)
      this.list = res.data
    },
    // 目录
    async changeList (id) {
      const res = await simples({ subjectID: id })
      // console.log(res)
      this.directory = res.data
    },
    // 标签
    async changeDirect (id) {
      // console.log(id)
      const res = await simpledirect({ subjectID: this.formData.subjectID })
      // console.log(res)
      this.directList = res.data
    },
    // 用户列表
    async getUserList () {
      const res = await list()
      const { list: userList } = res.data
      this.userList = userList
    },
    // 获取城市下区域
    handleCity () {
      const cityList = citys(this.citys.city)
      this.cityList = cityList
    },
    // 清空
    handleForm () {
      this.formData = {}
      this.citys = {}
    },
    // 搜素
    clickSearch () {
      this.$emit('clickSearch',
        {
          ...this.formData,
          ...this.citys
        })
    }
  }
}
</script>

<style>

</style>
